<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" 
      xmlns:comps="http://java.sun.com/jsf/composite/comps"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" >
    
    <body>

        <ui:composition template="./../../resources/templates/newTemplate.xhtml">

            <ui:define name="left" id="panel" >
                <comps:miPanel />
            </ui:define>

            <ui:define name="principal">
               <h:form id="desplieguePreguntas" style="width: 100%">  
               <p:growl id="msgs"/>
               <p:dialog header="Ingrese la respuesta" widgetVar="respuesta" resizable="false" modal="true"
                          showEffect="fade" width="370" >
                     <h:panelGrid columns="1" id="grid" style="text-align: center; width: 350px">  
                        <h:outputLabel value="Respuesta: " for="txt_title"></h:outputLabel>  
                        <p:inputTextarea id="txt_title" autoResize="false" rows="5"     
                                        value="#{desplieguePreguntas.nuevaRespuesta.comentario}" 
                                        style="width: 300px;" />  
                        <h:panelGrid columns="2" style="text-align: center; width: 350px">
                            <p:commandButton value="Limpiar" type="reset" style="width: 150px;"/>  
                            <p:commandButton value="Enviar respuesta" style="width: 150px;" update="preguntas noHayPreguntas msgs @parent"  
                                            actionListener="#{desplieguePreguntas.guardarPregunta}"
                                            onclick="respuesta.hide()">  
                                <p:collector value="#{desplieguePreguntas.selectedPregunta}"
                                             removeFrom="#{desplieguePreguntas.comentarios}"/>                                 
                            </p:commandButton>  
                        </h:panelGrid>
                    </h:panelGrid>  
                </p:dialog>
                <p:ajaxStatus style="width:16px;height:16px;">  
                    <f:facet name="start">  
                        <h:graphicImage value="/resources/images/loading.gif" />  
                    </f:facet>  
                    <f:facet name="complete">  
                        <h:outputText value="" />  
                    </f:facet>  
                </p:ajaxStatus> 
               <h3>Preguntas pendientes</h3> 
                <div class="preguntas">
                    <p:outputPanel id="preguntas" >  
                        <h:outputText id="noHayPreguntas" value="No hay preguntas pendientes para responder"
                                  rendered="#{empty desplieguePreguntas.comentarios}"
                                  style="margin: 80px"/>
                        <h:dataTable value="#{desplieguePreguntas.comentarios}" var="pregunta"
                                     rendered="#{desplieguePreguntas.cantidad != 0}" >  
                            <p:column>  
                                <div class="preguntasContenedor" >
                                    <div class="artImagen" >
                                        <h:graphicImage value="/image?id=#{pregunta.imageId}" 
                                                        style="max-width: 120px; max-height: 100px"
                                                        rendered="#{pregunta.imageId != -1}" />
                                        <h:graphicImage value="#{resource['images:noImage.png']}" 
                                                        style="max-width: 120px; max-height: 100px"
                                                        rendered="#{pregunta.imageId == -1}" />
                                    </div> 
                                    
                                    <div class="artDescripcion">
                                        <h6>
                                            <h:link value="#{pregunta.publicationTitle}" outcome="/vistas/mostrarPublicacion" >
                                                <f:param name="id" value="#{pregunta.publicacionId}" />
                                            </h:link>
                                        </h6>
                                        <div id="itemPregunta">
                                            <table cellspacing="0" cellpadding="5">
                                                <tr>
                                                    <td width="30px">
                                                        <h:outputText value="Pregunta:"  />  
                                                    </td>
                                                    <td width="400px">
                                                        <h:outputText value="#{pregunta.comentario}"/> 
                                                    </td>
                                                </tr>
                                            </table>
                                         </div>
                                    </div>
                                    <div style="text-align: right; height: 100%">
                                        <h:outputText value="Usuario: #{pregunta.usuario}" style="font-size: 13px" /><br/>
                                        <h:outputText value="#{pregunta.fechaComentario}" style="font-size: 12px" />
                                        <div class="preguntasAcciones">
                                            <p:commandButton value="Responder" onclick="respuesta.show()" >
                                                <f:setPropertyActionListener 
                                                    value="#{pregunta}" 
                                                    target="#{desplieguePreguntas.selectedPregunta}" />
                                            </p:commandButton>
                                        </div>
                                    </div>
                                </div>
                            </p:column>  
                        </h:dataTable>  
                    </p:outputPanel>  
                </div>               
             </h:form> 
            </ui:define>

        </ui:composition>

    </body>
</html>
